<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-select v-model="searInfo.type" style="width:120px;" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
      </div>
      <el-button
        v-if="accreditChildren.createMemberCoin"
        class="right"
        type="primary"
        @click="createGoldRecord"
      >新增金币记录</el-button>
    </div>
    <el-table ref="table" :data="tableData" border stripe>
      <el-table-column label="类型">
        <template slot-scope="scope">{{ getTransType(scope.row.transType) }}</template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" />
      <el-table-column prop="balance" label="余额" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
    <Pagination
      class="right"
      :total-count="totalCount"
      :page-size="page.pageSize"
      :current-page="page.pageNo"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <el-dialog
      :modal-append-to-body="false"
      title="新增金币记录"
      :close-on-click-modal="false"
      center
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="交易类型" prop="transType">
          <el-select v-model="ruleForm.transType" style="width:100%" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="ruleForm.amount" />
        </el-form-item>
        <el-form-item label="交易备注" prop="remark">
          <el-input v-model="ruleForm.remark" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitVal">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '~/components/commom/pagination';
import regular from '~/utils/regular';
import mmUrl from '~/utils/utilUrl';
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  _jump
} from '~/utils/util';
export default {
  components: {
    Pagination
  },
  props: ['id', 'accreditChildren'],
  data() {
    return {
      dialogVisible: false,
      loading: true,
      tableData: [],
      totalCount: 0,
      changeSelectOr: false,
      page: { maxResultCount: 0, pageNo: 0, pageSize: 20, skipCount: 0 },
      options: [
        {
          label: '邀请',
          value: 0
        },
        {
          label: '直播赠送礼物',
          value: 1
        },
        {
          label: '签到获得',
          value: 2
        },
        {
          label: '平台补偿',
          value: 3
        },
        {
          label: '平台扣除',
          value: 4
        }
      ],
      searInfo: {
        type: null,
        memberId: this.$props.id
      },
      copysearInfo: {
        type: null,
        memberId: this.$props.id
      },
      ruleForm: {
        transType: null,
        amount: null,
        remark: null
      },
      rules: {
        transType: regular.require1,
        amount: regular.positive,
        remark: regular.require30
      }
    }
  },
  watch: {
    id() {
      this.getInitTableData()
    }
  },
  mounted() {
    this.getInitTableData()
  },
  methods: {
    submitVal() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.$post({
            url: mmUrl.gold.create,
            data: {
              item: this.ruleForm,
              memberId: this.$props.id
            }
          }).then(() => {
            this.$refs['ruleForm'].resetFields()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getInitTableData()
            this.ruleForm = {}
            this.dialogVisible = false
          })
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    createGoldRecord() {
      this.dialogVisible = true
    },
    getTransType(res) {
      switch (res) {
        case 0:
          return '邀请';
          break
        case 1:
          return '直播赠送礼物';
          break
        case 2:
          return '签到获得';
          break
        case 3:
          return '平台补偿';
          break
        case 4:
          return '平台扣除';
          break
      }
    },
    getInitTableData() {
      this.$post({
        url: mmUrl.gold.get,
        data: {
          keyword: '',
          memberId: this.$props.id,
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 20,
            skipCount: 0
          },
          type: ''
        }
      }).then(res => {
        this.tableData = res.items.items
        this.totalCount = res.items.totalCount
        this.loading = false
      })
    },
    searchInfoMation(res) {
      this.copysearInfo = JSON.parse(JSON.stringify(this.searInfo))
      const result = _searchInfo(res, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.gold.get, res, that, true)
    }
  }
}
</script>

<style>
</style>
